<div class="dept-comp" style="min-height:calc(100vh -  157px)">
  <div nz-row [nzGutter]="10" style="padding-top: 20px;">

    <!-- 左边 -->
    <div nz-col nzSpan="8" style="height: 835px;padding:10px 20px;border: 1px solid #ebedf0;">
      <h2 style="width: 95%">部门列表
        <button nz-button nzType="primary" (click)="showModal(null,null)" style="float: right">新增</button>
      </h2>
      <nz-tree
        #treeCom
        [nzData]="nodes"
        (nzContextMenu)="activeNode($event)"
        (nzClick)="activeNode($event)"
        (nzDblClick)="openFolder($event)">
        <ng-template #contextTemplate>
          <ul nz-menu nzInDropDown>
            <li nz-menu-item (click)="showModal(null,1)">新增</li>
            <li nz-menu-item (click)="showModal(1,2)">修改</li>
            <li nz-menu-item (click)="deptDel()">删除</li>
          </ul>
        </ng-template>
        <ng-template #nzTreeTemplate let-node>
        <span class="custom-node" [class.active]="activedNode?.key===node.key">
          <span *ngIf="!node.isLeaf" (contextmenu)="contextMenu($event,contextTemplate)">
            <!--<i nz-icon [type]="node.isExpanded ? 'folder-open' : 'folder'" (click)="openFolder(node)"></i>-->
            <span class="folder-name">{{node.title}}</span>
            <!--<span class="folder-desc">created by {{node?.origin?.author | lowercase}}</span>-->
          </span>
          <span *ngIf="node.isLeaf" (contextmenu)="contextMenu($event,contextTemplate)">
            <!--<i nz-icon type="file"></i>-->
            <span class="file-name">{{node.title}}</span>
            <!--<span class="file-desc">modified by {{node?.origin?.author | lowercase}}</span>-->
          </span>
        </span>
        </ng-template>
      </nz-tree>
    </div>

    <!-- 右边 -->
    <div class="dept-r" nz-col nzSpan="16">
      <!-- 表格列表 -->
      <h2>{{tableName}}</h2>
      <div style="margin-top:20px;"></div>
      <div
        nz-row
        style="background-color: #fff;margin-top: 20px;padding:20px;"
      >
        <nz-table #basicTable [nzData]="tableInfos" [nzShowPagination]="false" [nzNoResult]="aa">
          <thead>
          <tr>
            <th style="text-align:center">部门名称</th>
            <th style="text-align:center">负责人</th>
            <th style="text-align:center">在职人数</th>
            <th style="text-align:center"></th>
          </tr>
          </thead>
          <tbody>
          <tr (click)="tableInit(item.id,item.name)" *ngFor="let item of basicTable.data;let i = index;">
            <td>{{item.name}}</td>
            <td style="text-align:center">{{item.leaderName}}</td>
            <td style="text-align:center">{{item.staffCount}}</td>
            <td style="text-align: center">

            </td>
          </tr>
          </tbody>
        </nz-table>
      </div>
      <nz-pagination *ngIf="total>0" [(nzPageIndex)]="pageIndex" [(nzTotal)]="total" [nzPageSizeOptions]="10" (nzPageIndexChange)="loadPage()" [nzShowTotal]="rangeTemplate"></nz-pagination>
      <ng-template #rangeTemplate let-range="range" let-total>
        当前显示 {{range[0]}}-{{range[1]}} 条数据 ，共有 {{total}} 条数据
      </ng-template>
      <ng-template #aa>
        <a (click)="showModal(null,3)" >添加子部门</a>
      </ng-template>
    </div>
  </div>
</div>

<!--新增修改模态框-->
<nz-modal [(nzVisible)]="isVisible" [nzTitle]="modalTitle" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel()">
  <ng-template #modalTitle>
    角色信息
  </ng-template>
  <form nz-form>
    <nz-form-item>
      <nz-form-label [nzSpan]="5" nzRequired>部门名称</nz-form-label>
      <nz-form-control [nzSpan]="12">
        <input nz-input name="name" [(ngModel)]="deptModInfos.name">
        <!--<nz-form-explain>Should be combination of numbers & alphabets</nz-form-explain>-->
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="5" nzRequired>所属上级部门</nz-form-label>
      <nz-form-control [nzSpan]="12">
        <input nz-input name="name1" [(ngModel)]="deptModInfos.parentName">
        <!--<nz-form-explain>Should be combination of numbers & alphabets</nz-form-explain>-->
      </nz-form-control>
    </nz-form-item>
  </form>
  <nz-tree
    [nzData]="nodes"
    nzCheckable
    nzCheckStrictly
    [nzCheckedKeys]="deptModInfos.parentId"
    (nzCheckBoxChange)="nzEvent($event)">
  </nz-tree>
  <form nz-form>
    <nz-form-item>
      <nz-form-label [nzSpan]="5">部门负责人</nz-form-label>
      <nz-form-control [nzSpan]="12">
        <nz-select [(ngModel)]="deptModInfos.leader" name="leader">
          <nz-option nzLabel="--请选择--" nzValue=""></nz-option>
          <nz-option *ngFor="let item of leadList" [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
        </nz-select>
        <!--<nz-form-explain>Should be combination of numbers & alphabets</nz-form-explain>-->
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="5">排序</nz-form-label>
      <nz-form-control [nzSpan]="12">
        <input type="number" nz-input name="name2" [(ngModel)]="deptModInfos.sort">
        <!--<nz-form-explain>Should be combination of numbers & alphabets</nz-form-explain>-->
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="5">部门描述</nz-form-label>
      <nz-form-control [nzSpan]="12">
        <textarea name="remark" style="width: 300px;height: 160px;" [(ngModel)]="deptModInfos.remark"></textarea>
        <!--<nz-form-explain>Should be combination of numbers & alphabets</nz-form-explain>-->
      </nz-form-control>
    </nz-form-item>
  </form>
  <ng-template #modalFooter>
    <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">保存</button>
    <button nz-button nzType="default" (click)="handleCancel()">取消</button>
  </ng-template>

</nz-modal>


